<template>
  <div class="img1">
    <div>
      <el-form ref="loginform" label-width="80px" :model="loginform" class="login-box" :rules="LoginFormRules">
        <h3 class="login-title">登录</h3>
        <el-form-item label="账号" prop="account">
          <el-input  placeholder="请输入账号" v-model="loginform.account" name="account"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" placeholder="请输入密码" v-model="loginform.password" name="password"/>
        </el-form-item>
        <el-form-item>
<!--          <button v-on:click="loginDemo">登ggg录</button>-->
                    <el-button @click="loginSubmit">登陆</el-button>
          <el-button @click="register1">免费注册</el-button>
        </el-form-item>
      </el-form>
    </div>
<!--    滑动验证-->
    <el-dialog
      title="滑动验证"
      :visible.sync="dialogVisible"
      width="350px">
      <verify   :loginform="loginform"  getUrl="/getLogin" successUrl="/Personal" ref="verify"></verify>
    </el-dialog>
  </div>
</template>

<script>
import verify from './verify '
export default {
  name: '',
  data: function () {
    // 自定义验证规则：验证码验证规则
    return {
      dialogVisible: false,
      loginform: {
        account: '',
        password: ''
      },
      LoginFormRules: {
        account: [
          {required: true, message: '账号不能为空', trigger: 'blur'},
          {min: 0, max: 20, message: '请确认用户名长度6-12', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '密码不能为空', trigger: 'blur'},
          {min: 0, max: 12, message: '请确认用户名长度6-12', trigger: 'blur'}
        ]
      }
    }
  },
  components: {
    verify: verify
  },
  methods: {
    loginSubmit () {
      this.$refs.loginform.validate((valid) => {
        // valid 校验后的结果   成功为 true   失败为false
        this.dialogVisible = valid
      })
    },
    register1 () {
      this.$router.push('/Register')
    }
  }
}
</script>

<style lang="scss" scoped>
  .login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }

  .login-title {
    text-align: center;
    margin: 0 auto 40px auto;
    color: #303133;
  }

  .img1 {
    background-size: 100% 100%;
    background: url('../../static/lmg/2.jpg') center center repeat;
    height: 100%;
    position: fixed;
    width: 100%
  }
  .identifybox {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
  }

</style>
